<!-- sorderDetails:订单列表详情 -->
<template>
    <div class="sorderDetails  ">
        <el-page-header class="header" @back="goBack" content="订单详情"> </el-page-header>
        <div class="conter">
            <p class="title">基本信息</p>
            <div class="basic">
                <div class="">
                    <div class="">
                        <div class="test">申请单号：</div>
                        <div class="cont">{{ row.orderId }}</div>
                    </div>
                    <div class="">
                        <div class="test">申请类型：</div>
                        <div class="cont">{{ row.orderType }}</div>
                    </div>
                    <div class="">
                        <div class="test">关联订单号：</div>
                        <div class="cont">{{ row.platOrderId }}</div>
                    </div>
                </div>
                <div class="">
                    <div class="">
                        <div class="test">申请退款金额：</div>
                        <div class="cont">{{ row.price }}</div>
                    </div>
                    <div class="">
                        <div class="test">平台：</div>
                        <div class="cont">{{ row.plat }}</div>
                    </div>

                    <div class="">
                        <div class="test">店铺：</div>
                        <div class="cont">{{ row.shop }}</div>
                    </div>
                </div>
                <div class="">
                    <div class="">
                        <div class="test">申请时间：</div>
                        <div class="cont">{{ row.createdTime }}</div>
                    </div>
                    <div class="">
                        <div class="test">退款原因：</div>
                        <div class="cont">{{ row.resonse }}</div>
                    </div>
                    <div class="">
                        <div class="test">退款说明：</div>
                        <div class="cont">{{ row.remarks }}</div>
                    </div>
                </div>
            </div>

            <p class="title" style="margin:40px 0 20px 10px">退款商品</p>
            <el-table :data="row.goodsDeail" class="table" height="250" border min-width="400">
                <el-table-column label="商品信息" width="300">
                    <template slot-scope="scope">
                        <!-- v-for="(item, index) in items" :key="index" -->
                        <div class="tableCont">
                            <img :src="scope.row.info.mainImgUrl" alt="" />
                            <div class="titles">
                                {{ scope.row.info.goodsName }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="goods.goodsNum" label="数量"> </el-table-column>
                <el-table-column prop="goods.refundFee" label="售价"> </el-table-column>
                <el-table-column prop="info.spec" label="规格"> </el-table-column>
                <el-table-column prop="info.goodsNo" label="SPU编码"> </el-table-column>
                <el-table-column prop="info.skuNo" label="SKU编码"> </el-table-column>
            </el-table>
            <p class="title" style="margin-top:40px">
                退货信息
            </p>
            <div class="basic">
                <div class="">
                    <div class="">
                        <div class="test">物流公司：</div>
                        <div class="cont">{{ row.logisticsCompanyNo }}</div>
                    </div>

                </div>
                <div class="">
                    <div class="">
                        <div class="test">快递单号：</div>
                        <div class="cont">{{ row.logisticsNo }}</div>
                    </div>

                </div>
                <div class="">
                    <div class="">
                        <div class="test">发货时间：</div>
                        <div class="cont">{{ row.fahuoTime }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder, exportOrder } from '@/api/biz/order';

export default {
    name: 'sorderDetails',
    props: ['row'],
    data() {
        return {
            baseimg: require('../../assets/image/ewm.jpg'),
            imgs: [
                {
                    img: require('../../assets/image/ewm.jpg')
                },
                {
                    img: require('../../assets/image/ewm.jpg')
                }
            ],
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ]
        };
    },
    created() {},
    methods: {
        // 返回列表
        goBack() {
            //   console.log("go back");
            this.$emit('toRetreat');
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.sorderDetails {
    width: 97%;
    height: 95%;
    background: #ffffff;
    position: absolute;
    z-index: 99;
    top: 0;
    box-sizing: border-box;
    margin-top: 20px;
    overflow: auto;
    overflow-x: hidden;
    .header {
        width: 100%;
        box-sizing: border-box;
        padding-left: 20px;
    }
    .conter {
        width: 100%;
        height: 800px;
        overflow: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .title {
        width: 100%;
        background: #ededed;
        padding: 10px;
        font-size: 14px;
        margin-left: 10px;
    }
    .basic,
    .address {
        display: flex;
        > div {
            flex: 1;
            > div {
                overflow: hidden;
            }
        }
        div {
            font-size: 14px;
            line-height: 24px;
            img {
                width: 120px;
                height: 75px;
                float: left;
            }
            img:nth-child(3) {
                margin-left: 20px;
            }
        }
    }
    .table {
        width: 98%;
        margin: 0 10px;
    }
    // 公共
    .test,
    .cont {
        float: left;
    }
    .test {
        width: 100px;
        text-align: right;
    }

    .el-page-header__title,
    .el-page-header__content {
        line-height: 80px;
    }
    .el-page-header__title {
        font-size: 18px;
    }
}
</style>
